<template>
	<view class="container">
		<view class="login">
			登录
		</view>
		<view class="login-desc">
			{{desc}}
		</view>
		
		<view v-if="showSwitchType()" class="switch-view" @click="switchType">
			<view>切换{{list[curNow].switchName}}</view>
			<u-image class="icon" width="32rpx" height="32rpx" src="@/static/login_switch.png"></u-image>
		</view>

		<view class="input-bg" style="margin-top: 60rpx;">
			<u-image class="icon" width="35rpx" height="40rpx" src="@/static/login_username.png"></u-image>
			<u-input style="flex-grow: 1;" v-model="username" type="number" placeholder="请输入账号"></u-input>
		</view>
		
		<view class="input-bg">
			<u-image class="icon" width="37rpx" height="45rpx" src="@/static/login_password.png"></u-image>
			<u-input style="flex-grow: 1;" v-model="psw" :type="list[curNow].type" :placeholder="list[curNow].placeholder"></u-input>
			<u-button v-show="curNow === 1 && channel !== 'xm'" size="mini" type="success" @click="getVerifyCode('')">{{codeTips}}</u-button>
		</view>
		
		<view class="forget-psw" @click="forgetPswClick">{{curNow === 0 ? '忘记密码' : ''}}</view>
		
		<view class="more-bottom-view">
			<view v-if="channel === 'xxwbaby'" @click="formClick">
				入托申请
			</view>
			<view v-if="channel === 'xybaby'" @click="formClick">
				入园申请
			</view>
			<view class="action-view">
				<!-- #ifdef H5 -->
					<view>绑定</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
					<view>登录</view>
				<!-- #endif -->
				<view class="action-btn" @tap="$u.debounce(loginClick, 500)">
					<image style="width: 28rpx;height: 24rpx;"src="@/static/login_arrow.png"></image>
				</view>
			</view>
		</view>
		
		<view v-if="channel !== 'xm'" class="desc-view">
			<u-checkbox-group>
				<u-checkbox v-model="agree" active-color="red"></u-checkbox>
			</u-checkbox-group>
			<view>我已阅读并同意 </view><view class="point" @click="privacyClick">隐私政策</view> 和 <view class="point" @click="userClick">使用条款</view>
		</view>
		
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		
		<uni-popup ref="popup" type="center" border-radius="14" background-color="#fff">
			<view style="padding: 50rpx; display: flex;flex-direction: column;align-items: center;">
				<u-image width="200rpx" height="80rpx" :src="verifySrc"></u-image>
				<u-field v-model="verify" label="验证码" placeholder="请输入图形验证码" :clearable="false">
				</u-field>
				<!-- <button class="action" type="primary" @click="getVerifyCode(verify)">确定</button> -->
				<x-button class="action" @click="getVerifyCode(verify)" title="确定"></x-button>
			</view>
		</uni-popup>
		
		<image class="bg-right" src="@/static/login_right_bg.png"></image>
		<image class="bg-left" src="@/static/login_left_bg.png"></image>
	</view>
</template>

<script>
	import XButton from '@/components/x-button.vue'
	import {
		login,
		loginTch,
		sendLoginVerifySms,
		loginP,
		loginParentByPsw,
		getImageVerifyCode,
		userBind
	} from '../api/user.js'
	import {
		setTicket
	} from '@/utils/auth.js'
	import {
		isEmpty
 	} from  '@/utils/utils.js'
	import md5 from "@/utils/md5.js";
	import { http } from '@/api/service.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				agree:false,
				appType: '',
				list: [{
						name: '教师端',
						value: 'app-tch',
						disabled: false,
						placeholder: '请输入密码',
						switchName: '家长端',
						type: 'password',
					},
					{
						name: '家长端',
						value: 'app-p',
						disabled: false,
						placeholder: '请输入验证码',
						switchName: '教师端',
						type: 'text',
					}
				],
				curNow: 0,
				placeholder: "",
				
				username: '',
				psw: '',
				smsCode: '',
				
				verifySrc: '',
				verify: '',
				
				codeTips: '',
			}
		},
		computed: {
			formVisible() {
				if (this.appType === 'app-p') {
					return true;
				}
				return false;
			},
			channel() {
				return getApp().globalData.channel;
			},
			
			desc () {
				if (getApp().globalData.channel === 'xm' ) {
					return 'Hi，欢迎进入奈思妈妈托育中心'
				}
				if (getApp().globalData.channel === 'xybaby' ) {
					return 'Hi，欢迎进入紫丹幼儿园'
				}
				if (getApp().globalData.channel === 'jzwy' ) {
					return 'Hi，欢迎进入金职托育通'
				}
				return 'Hi，欢迎进入金职托育通'
			}
		},
		onLoad() {
			if (this.channel === 'xm') {
				this.list[1].placeholder = '请输入密码';
				this.list[1].type = 'password'
			}
			this.appType = uni.getStorageSync('appType');
			if (this.appType === 'app-p' || this.appType === 'mp-p') {
				this.curNow = 1;
			}
			// #ifdef H5
				this.curNow = 1;
			// #endif
			this.$store.commit('app/switchAppType', this.list[this.curNow].value);
			this.placeholder = this.list[this.curNow].placeholder;
		},
		methods: {
			switchType() {
				if (this.curNow === 0) {
					this.curNow = 1;
				} else {
					this.curNow = 0;
				}
				this.appType = this.list[this.curNow].value;
				this.placeholder = this.list[this.curNow].placeholder;
				this.$store.commit('app/switchAppType', this.list[this.curNow].value)
			},
			
			sectionChange(index) {
				this.curNow = index;
				this.$store.commit('app/switchAppType', this.list[this.curNow].value)
			},
			//显示图形验证码
			showVerifyCode() {
				if (this.$u.test.isEmpty(this.username)) {
					uni.showToast({
						icon: 'none'
					})
					return;
				};
				this.verify = '';
				let timestamp = Date.parse(new Date());
				this.verifySrc = `https://wp.jz1x.com/wx/api/portal/image_verify_code?mobile=${this.username}&timestamp=${timestamp}`;
				
				const appDebug = uni.getStorageSync('appDebug');
				if (appDebug) {
					this.verifySrc = `http://mp.dev.dotflat.cn/wx/api/portal/image_verify_code?mobile=${this.username}&timestamp=${timestamp}`;
				}
				// this.verifySrc = `${http.config.baseURL}wx/api/portal/image_verify_code?mobile=${this.username}&timestamp=${timestamp}`;
				// this.verifySrc = getImageVerifyCode(this.username, timestamp);
				console.log(this.verifySrc);
				this.$refs.popup.open();
			},
			//获取验证码
			getVerifyCode(verify) {
				console.log('555');
				if (!this.$u.test.mobile(this.username)) {
					this.$u.toast('手机号码不正确');
					return;
				}
				if(!this.$refs.uCode.canGetCode) {
					return;
				}
				let params = {};
				if (isEmpty(verify)) {
					params = {
						'mobile': this.username,
					};
				} else {
					params = {
						'mobile': this.username,
						'verify': verify,
					};
				}
				sendLoginVerifySms(params).then(res => {
					this.$u.toast('短信已发送');
					this.$refs.uCode.start();
					this.$refs.popup.close();
				}).catch(error =>{
					console.log(error);
					if (error.code === '920000') {
						this.$u.toast('验证码发送频繁，请输入图形验证码');
						this.showVerifyCode();
					}
				})
			},
			loginClick() {
				console.log('this.curNow',this.curNow)
				if (this.curNow === 0 ){
					this.loginTchClick()
				} else {
					if (!this.agree) {
						uni.showToast({
							title: '请先阅读并同意协议',
							icon: 'none'
						})
						return;
					};
					if (this.$u.test.isEmpty(this.username)) {
						uni.showToast({
							title: '请填写账号',
							icon: 'none'
						})
						return;
					};
					if (this.$u.test.isEmpty(this.psw)) {
						uni.showToast({
							title: '请填写验证码',
							icon: 'none'
						})
						return;
					}
					
					// #ifdef H5
						if(process.env.NODE_ENV === 'development'){
							this.loginPClick();
						} else {
							this.userBind()
						}
					// #endif
					
					// #ifdef MP-WEIXIN
						this.loginPClick()
					// #endif
					
					// #ifdef APP
						this.loginPClick();
					// #endif
				}
			},
			userBind() {
				userBind({ mobile: this.username, verifyCode: this.psw }).then(res => {
					uni.hideLoading();
					console.log(res);
					this.$store.commit('user/setParentInfo', res.data);
					uni.reLaunch({
						url: '/pages/tabbar-item1',
						fail: function(res) {
							console.log(res);
						}
					})
				}).catch(error =>{
					console.log(res);
					uni.hideLoading();
				})
			},
			loginPClick() {
				const channel = getApp().globalData.channel
				uni.showLoading({})
				if (channel === 'xm') {
					loginParentByPsw(this.username, md5.hex_md5(this.psw)).then(res => {
						uni.hideLoading();
						console.log(res);
						this.loginPSuccess(res)
					})
				} else {
					loginP(this.username, this.psw).then(res => {
						uni.hideLoading();
						console.log(res);
						this.loginPSuccess(res)
					}).catch(error =>{
						// console.log(res);
						uni.hideLoading();
					})
				}
			},
			
			loginPSuccess(res) {
				const channel = getApp().globalData.channel
				this.$store.commit('user/setParentInfo', res.data);
				setTicket(res.data.ticket);
				this.$store.dispatch('user/refreshParentInfo',{callback: () => {
					if (channel === 'xm') {
						uni.reLaunch({
							url: '/pages/tabbar-item3',
							fail: function(res) {
								console.log(res);
							}
						})
					} else {
						uni.reLaunch({
							url: '/pages/tabbar-item1',
							fail: function(res) {
								console.log(res);
							}
						})
					}
				}})
			},
			
			loginTchClick() {
				if (!this.agree) {
					uni.showToast({
						title: '请先阅读并同意协议',
						icon: 'none'
					})
					return;
				};
				if (this.$u.test.isEmpty(this.username)) {
					uni.showToast({
						title: '请填写账号',
						icon: 'none'
					})
					return;
				};
				if (this.$u.test.isEmpty(this.psw)) {
					uni.showToast({
						title: '请填写密码',
						icon: 'none'
					})
					return;
				}
				uni.showLoading({})
				let that = this;
				loginTch(this.username, md5.hex_md5(this.psw)).then(res => {
					console.log(res);
					// uni.hideLoading();
					setTicket(res.data);
					that.$store.dispatch('user/refreshTeacherInfo',{
						callback: function() {
							uni.reLaunch({
								url: '/pages/tabbar-item1',
								fail: function(res) {
									console.log(res);
								}
							});
						}
					})

				}).catch(res => {
					console.log(res);
					// uni.hideLoading();
				})

			},
			
			forgetPswClick() {
				if (this.curNow !== 0) {
					return;
				}
				this.$u.route({
					url: 'pages_base/common/forget-pwd-page',
				})
			},
			
			codeChange(text) {
				this.codeTips = text;
			},
			
			formClick() {
				this.$u.route({
					url: '/pages_base/common/form-page'
				})
			},
			
			loginTest() {
				const href = window.location.href;
				login(href).then(res => {
					console.log(res);
				}).catch(res => {
					console.log(res)
					if (res.code === "2000002") {
						window.location.replace(res.data)
					}
				})
			},
			
			showSwitchType() {
				// #ifdef H5
					if(process.env.NODE_ENV == 'development'){
						return true;
					}
				// #endif
				// #ifdef APP
					return true;
				// #endif
				 // #ifdef MP-WEIXIN 
					return true;
				// #endif
				return false;
			},
			
			privacyClick() {
				this.$u.route({
					url: 'pages_base/common/webview',
					params: {
						url: 'https://pc.jz1x.com/privacy_agree.html',
						title: '隐私政策'
					}
				})
			},
			
			userClick() {
				this.$u.route({
					url: 'pages_base/common/webview',
					params: {
						url: 'https://pc.jz1x.com/user_agree.html',
						title: '用户协议'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
		height: 100%;
	}
	.container {
		height: 100%;
		margin-left: 60rpx;
		margin-right: 60rpx;
		display: flex;
		flex-direction: column;
		
		.login{
			font-size: 72rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 264rpx;
		}
		
		.login-desc{
			font-size: 30rpx;
			font-weight: 400;
			color: #666666;
			opacity: 0.67;
			margin-top: 42rpx;
		}
		
		.switch-view{
			font-size: 24rpx;
			font-weight: bold;
			color: #6E645A;
			margin-top: 76rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.icon{
				margin-left: 10rpx;
			}
		}
		
		.input-bg{
			display: flex;
			flex-direction: row;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 11rpx 49rpx 1rpx rgba(203, 203, 203, 0.3);
			border-radius: 49rpx;
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 50rpx;
			padding-right: 30rpx;
			
			.icon{
				margin-right: 30rpx;
			}
		}
		
		.forget-psw{
			height: 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			align-self: flex-end;
			margin-top: 20rpx;
		}
		
		.more-bottom-view{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			
			.action-view{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				flex-grow: 1;
				align-items: center;
				align-self: flex-end;

				.action-btn{
					width: 115rpx;
					height: 60rpx;
					background: linear-gradient(270deg, #DA473A, #E66761);
					border-radius: 30rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.desc-view{
			display: flex;
			align-items: center;
			flex-direction: row;
			font-size: 26rpx;
			font-weight: 300;
			color: #999999;
			line-height: 16rpx;
			position: absolute;
			right: 60rpx;
			bottom: 70rpx;
			.u-checkbox{
				width: 50rpx !important;
			}
			>.point{
				color: #333333;
			}
		}
		
		.bg-right{
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 347rpx;
			height: 460rpx;
		}
		
		.bg-left{
			position: absolute;
			width: 99rpx;
			height: 470rpx;
			left: 0rpx;
			bottom: 0rpx;
		}

		.action {
			margin-top: 40rpx;
		}
	}
</style>
